/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { customer as customerApi } from "@mall/api-services"
import * as React from "react"
import { useEffect, useState } from "react"
import { useHistory, useParams } from "react-router-dom"
import List from "../components/list"
import NavBar from "../components/navbar"
import Icon from "../icon"
import "./setting.scss"

export default function CustomerSetting() {
  const history = useHistory()
  const params = useParams()
  const customerId = params["customer_id"]
  const [customer, setCustomer] = useState(new customerApi.Customer())

  useEffect(() => {
    customerApi.CustomerServiceV1.getCustomer(customerId).then(setCustomer)
  }, [customerId])

  return (
    <div className="customer-setting">
      <NavBar left={<Icon type="left" onClick={() => history.goBack()}/>}>用户设置</NavBar>
      <List className="customer-setting-list">
        <List.Item right={<Icon type="right" size="xxs"/>}>
          <div className="customer-basic-info">
                            <span className="customer-basic-info-avatar">
                                <img src={customer.avatar} alt={customerId}/>
                            </span>
            <div className="customer-basic-info-nickname">
              <span>{customer.nickname}</span>
              <span className="customer-basic-info-username">用户名: {customer.username}</span>
            </div>
          </div>
        </List.Item>
        <List.Item right={<Icon type="right" size="xxs"/>}
                   onClick={() => history.push(`/customers/${customerId}/addresses`)}>
          地址管理
        </List.Item>
      </List>
      <List className="customer-setting-list">
        <List.Item right={<Icon type="right" size="xxs"/>}>
          账户与安全
        </List.Item>
        <List.Item right={<Icon type="right" size="xxs"/>}>
          隐私
        </List.Item>
        <List.Item right={<Icon type="right" size="xxs"/>}>
          通用
        </List.Item>
      </List>
      <List className="customer-setting-list">
        <List.Item right={<Icon type="right" size="xxs"/>}>
          问题反馈
        </List.Item>
        <List.Item right={<Icon type="right" size="xxs"/>}>
          关于 Mall Foundry APP
        </List.Item>
      </List>
      <List className="customer-setting-list">
        <List.Item>
          <div className="customer-setting-button" onClick={() => history.push("/login")}>
            退出登录
          </div>
        </List.Item>
      </List>
    </div>
  )
}
